<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>新建群发</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/fission/css/iconfont.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		} 
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
			justify-content: space-between;
		}
		.public_title_container a{
			fill: #999;
		}
		/*公共表单部分*/
		.public_form_container{
			padding: 20px 20px 40px 20px;
		}
		.public_form_content{
			padding: 24px 40px 24px 0;
			background: #fff;
			border: 1px solid #e9e9e9;
			margin-bottom: 8px;
		}
		.public_form_List{
			margin-bottom: 10px;
		}
		.public_form_List:last-child{
			margin-bottom: 0px;
		}
		.public_formTitle_container lable{
			font-size: 13px;
			font-weight: bold;
		}
		.service-card {
		  padding: 0 7px;
		  color: rgba(0,0,0,.65);
		  line-height: 28px;
		  font-size: 13px;
		  display: inline-block;
		  margin: 0 8px 0 5px;
		  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
		  white-space: nowrap;
		  background: #fafafa;
		  border: 1px solid #e9e9e9;
		  border-radius: 4px;
		  position: relative;
		}
		.service-card i {
		  font-size: 14px;
		  display: inline-block;
		  color: #7da3d1;
		  margin-right: 2px;
		}
		.service-card .close {
		  position: absolute;
		  top: -13px;
		  right: -8px;
		  opacity: .6;
		  cursor: pointer;
		}
		.service-card .close:hover {
		  opacity: 1;
		}
	</style>
</head>
<body>
	<form class="layui-form" id="form1">
		

		<div class="public_container">
			<!-- /*公共头部带搜索*/ -->
			<div class="public_content">
				<div class="public_title_container">
					<p>新建群发</p>
					<a href="javascript:history.back(-1)">
						<svg t="1599462684269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8055" width="20" height="20"><path d="M501.2992 273.408l1.024-156.16L184.65792 379.904l314.29632 266.1376 0.95232-149.2992c313.86624 42.5984 178.29888 231.3216-0.5632 410.2144 619.5712-404.3776 251.01312-590.6432 1.95584-633.5488z" p-id="8056"></path></svg>
					</a>
				</div>

			</div>
			<!-- /*公共头部带搜索*/ end -->
			<!-- 公共表单部分 -->
			<div class="public_form_container">
				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">任务名称：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<input type="text" name="name" required lay-verify="required"  placeholder="请输入标题" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
				</div>

				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">群发对象：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block" id="shareuser">
								<input type="radio" lay-filter="shareuser" name="shareuser" value="1" title="全部" checked>
								<input type="radio" lay-filter="shareuser" name="shareuser" value="2" title="按客户标签">
								<input type="radio" lay-filter="shareuser" name="shareuser" value="3" title="按成员">
							</div>
						</div>
					</div>
					<div class="public_form_List shareuser" id="seleatLable" style="display: none; margin-bottom: 0;">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">选择标签：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<span class="layui-btn layui-btn-primary" id="addLable">+ 前往添加</span>
							</div>
						</div>
						<input type="hidden" name="checkLable" id="checkLable"/>
						<div id="checkLableCon" style="padding: 10px 0px 0px 105px;">
							
						</div>
					</div>
					<div class="public_form_List shareuser" id="sharePeople" style="display: none; margin-bottom: 0;">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">群发成员：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<span class="layui-btn layui-btn-primary" id="addPeople">+ 前往添加</span>
							</div>
						</div>
						<input type="hidden" name="checkUser" id="checkUser"/>
						<div id="checkUserCon" style="padding: 10px 0px 0px 105px;">
							
						</div>
					</div>
				</div>

				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">选择时间：</lable>
						</div>
						<div class="public_formOther_container" >
							<div class="layui-input-block" id="selectTime_container">
								<input type="radio" lay-filter="selectTime" name="selectTime" value="1" title="立即群发" checked>
								<input type="radio" lay-filter="selectTime" name="selectTime" value="2" title="定时群发">
							</div>
						</div>
					</div>
					<div class="public_form_List" id="selectTime" style="display: none;">
						<div class="public_formTitle_container">
							<lable class="layui-form-label"> </lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<input type="text" class="layui-btn layui-btn-primary" name="timing_time" id="test1" placeholder="点击选择时间">
							</div>
						</div>
					</div>
				</div>

				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">文字：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
							  <textarea name="text_content" id="text_content" placeholder="请输入内容" required lay-verify="required" class="layui-textarea"></textarea>
							</div>
						</div>
					</div>
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">其他类型：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block" id="shareType">
								<input type="radio" lay-filter="shareType" name="shareType" value="1" title="无" checked>
								<input type="radio" lay-filter="shareType" name="shareType" value="2" title="图片">
								<input type="radio" lay-filter="shareType" name="shareType" value="3" title="图文">
								<input type="radio" lay-filter="shareType" name="shareType" value="4" title="小程序">
							</div>
						</div>
					</div>
					<!-- 图片 -->
					<div class="public_form_List publicHide_content" id="imgcontainer" style="display: none;">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">图片：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<img onerror="this.style.display='none'" id="pic_image" src="" style="width: 100px; height: 100px;">
								<input type="hidden" name="image" id="image" />
								<button type="button" class="layui-btn select_img" data-target="image">
								  <i class="layui-icon">&#xe67c;</i>上传图片
								</button>

							</div>
						</div>
					</div>
					
					<!-- 图文 -->
					<div class="public_form_List publicHide_content" id="imgtextcontainer" style="display: none;">

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">标题：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="link_title" id="link_title" required   placeholder="请输入标题" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">链接：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="link_url" id="link_url" required   placeholder="请输入链接" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">封面：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<img onerror="this.style.display='none'" id="pic_link_pic" src="" style="width: 100px; height: 100px;">
									<input type="hidden" name="link_pic" id="link_pic" />
									<button type="button" class="layui-btn select_img" data-target="link_pic">
									  <i class="layui-icon">&#xe67c;</i>上传图片
									</button>

								</div>
							</div>
						</div>

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">描述：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="link_desc" id="link_desc" required   placeholder="请输入描述" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
					</div>

					<!-- 小程序 -->
					<div class="public_form_List publicHide_content" id="xcxcontainer" style="display: none;">

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">小程序名称：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="miniprogram_name" id="miniprogram_name" required   placeholder="请输入名称" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">小程序ID：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="miniprogram_appid" id="miniprogram_appid" required   placeholder="请输入ID" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
							
						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">小程序路径：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="miniprogram_page" id="miniprogram_page" required   placeholder="请输入路径" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">小程序标题：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="miniprogram_title" id="miniprogram_title" required placeholder="请输入标题" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
						
						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">小程序封面：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<img onerror="this.style.display='none'" id="pic_miniprogram_pic" src="" style="width: 100px; height: 100px;">
									<input type="hidden" name="miniprogram_pic" id="miniprogram_pic" />
									<button type="button" class="layui-btn select_img" data-target="miniprogram_pic">
									  <i class="layui-icon">&#xe67c;</i>上传图片
									</button>

								</div>
							</div>
						</div>
						
						
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</div>
			<!-- 公共表单部分 end-->
		</div>
	</form>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		function add_msg_templates(page,id){
			myAjaxPost(false, true, 'add_msg_templates.html', { id:id,page:page}, function (resp) {
			   if (resp.data == 1) {
				    add_msg_templates(page+1,id);
				}else{
					tusi(resp.msg);
				    if(resp.msg == "操作成功"){
				        setTimeout(function(){
    						location.href = 'msg_template.html'; 
    					},2000);   
				    }
					return false;
				}
			})
		}
	</script>
	<script type="text/javascript">
		// 上传
		layui.use('upload', function(){
		  var upload = layui.upload;
		   
		  //执行实例
		  var uploadInst = upload.render({
		    elem: '#uploadImg' //绑定元素
		    ,url: '/upload/' //上传接口
		    ,done: function(res){
		      //上传完毕回调
		    }
		    ,error: function(){
		      //请求异常回调
		    }
		  });
		});
		// 日期
		layui.use('laydate', function(){
		  var laydate = layui.laydate;
		  
		  laydate.render({ 
		    elem: '#test1'
		    ,type: 'datetime'
		  });
		});
		// 弹窗
		layui.use('layer', function(){
		  var layer = layui.layer;
		}); 
		// 表单
		layui.use('form', function(){
		  var form = layui.form;
		  
		  //监听提交
		  form.on('submit(formDemo)', function(data){
			var formData = $('#form1').serialize();	
			myAjaxPost(false, true, '', formData, function (resp) {
				if (resp.status == 'success') { 
					if(resp.data[1] == 1){
						add_msg_templates(0,resp.data[0]);
					}else{
						tusi(resp.msg);
						setTimeout(function(){
    						location.href = 'msg_template.html'; 
    					},2000);   
					} 
				}else{
					alert(resp.msg);
				}
			});
		  });
		  form.on('radio(shareuser)', function (data) {
           
                if ($('#shareuser input[name="shareuser"]:checked').val() == "1") {
                    $(".shareuser").hide();
                }else if($('#shareuser input[name="shareuser"]:checked').val() == "2"){
                	$(".shareuser").hide();
                	$("#seleatLable").show();
                }
                else if($('#shareuser input[name="shareuser"]:checked').val() == "3"){
                	$(".shareuser").hide();
                	$("#sharePeople").show();
                }
                
                form.render();
            });
		  form.on('radio(selectTime)', function (data) {
           
                if ($('#selectTime_container input[name="selectTime"]:checked').val() == "1") {
                    $("#selectTime").hide();
                }else if($('#selectTime_container input[name="selectTime"]:checked').val() == "2"){
                	$("#selectTime").show();
                }
                
                form.render();
            });
		  form.on('radio(shareType)', function (data) {
           
                if ($('#shareType input[name="shareType"]:checked').val() == "1") {
					$('#image').removeAttr("lay-verify");
					$('#link_title').removeAttr("lay-verify");
					$('#link_url').removeAttr("lay-verify");
					$('#miniprogram_appid').removeAttr("lay-verify");
					$('#miniprogram_title').removeAttr("lay-verify");
					$('#miniprogram_pic').removeAttr("lay-verify");
					$('#text_content').attr("lay-verify","required");
                    $(".publicHide_content").hide();
                }else if($('#shareType input[name="shareType"]:checked').val() == "2"){
					$('#text_content').removeAttr("lay-verify");
					$('#link_title').removeAttr("lay-verify");
					$('#link_url').removeAttr("lay-verify");
					$('#miniprogram_appid').removeAttr("lay-verify");
					$('#miniprogram_title').removeAttr("lay-verify");
					$('#miniprogram_pic').removeAttr("lay-verify");
					$('#image').attr("lay-verify","required");
                	$(".publicHide_content").hide();
                	$("#imgcontainer").show();
                }else if($('#shareType input[name="shareType"]:checked').val() == "3"){
					$('#text_content').removeAttr("lay-verify");
					$('#image').removeAttr("lay-verify");
					$('#miniprogram_appid').removeAttr("lay-verify");
					$('#miniprogram_title').removeAttr("lay-verify");
					$('#miniprogram_pic').removeAttr("lay-verify");
					$('#link_title').attr("lay-verify","required");
					$('#link_url').attr("lay-verify","required");
                	$(".publicHide_content").hide();
                	$("#imgtextcontainer").show();
                }else if($('#shareType input[name="shareType"]:checked').val() == "4"){
					$('#text_content').removeAttr("lay-verify");
					$('#image').removeAttr("lay-verify");
					$('#link_title').removeAttr("lay-verify");
					$('#link_url').removeAttr("lay-verify");
					$('#miniprogram_appid').attr("lay-verify","required");
					$('#miniprogram_title').attr("lay-verify","required");
					$('#miniprogram_pic').attr("lay-verify","required");
                	$(".publicHide_content").hide();
                	$("#xcxcontainer").show();
                }
                
                form.render();
            });


		});
	</script>
	<script type="text/javascript">
		$('#addLable').on('click',function(){
			layer.open({
			  type: 2,
			  title: '请选择标签',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['700px', '530px'],
			  content: 'select_tag.html'
			}); 
		})
		$('#addPeople').on('click',function(){
			layer.open({
			  type: 2,
			  title: '请选择人员',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['700px', '530px'],
			  content: 'select_user.html'
			}); 
		})
	</script>
	<script>
	layui.use(['element', 'layer', 'upload'], function () {
	  var layer = layui.layer;
	});
	$('.select_img').on('click',function  () {
	  var targetId=this.getAttribute('data-target');
	  layer.open({
		title:'图片库',
		type: 2,
		area: ['700px', '450px'],
		fixed: false, //不固定
		maxmin: false,
		content: '/imgLib/lib.html?type=vshop_img&target='+targetId
	  });
	})

	window.uploadImgCallback=function (tgt,url) {
	  console.log('选择图片结果',tgt,url);
	  if(tgt=='image'){
		var inputEle=$('#image');
		var prevEle=$('#pic_image');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='link_pic'){
		var inputEle=$('#link_pic');
		var prevEle=$('#pic_link_pic');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='miniprogram_pic'){
		var inputEle=$('#miniprogram_pic');
		var prevEle=$('#pic_miniprogram_pic');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }
	};
	</script>
</body>
</html>